<template>
  <el-card>
    <!-- 表单 -->
    <el-table stripe style="width: 100%" border :data="skuList" v-loading="loading">
      <el-table-column type="index" label="序号" width="80" align="center" row-key="id">
      </el-table-column>
      <el-table-column prop="skuName" label="名称" width="width" align="center">
      </el-table-column>
      <el-table-column prop="skuDesc" label="描述" width="width" align="center">
      </el-table-column>

      <el-table-column label="默认图片" width="150" align="center">
        <template slot-scope="{ row}">
          <div class="info">
              <img :src="row.skuDefaultImg" alt="商品图片" style="width:80px">
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="weight"
        label="重量(KG)"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="price" label="价格(元)" width="80" align="center">
      </el-table-column>
      <el-table-column label="操作" width="width" align="center">
        <template slot-scope="{ row}">
          <el-button
            type="info"
            title="上架"
            size="mini"
            icon="el-icon-top"
            v-if="row.isSale == 0"
            @click="onSale(row.id)"
          ></el-button>
          <el-button
            type="success"
            title="下架"
            v-else
            size="mini"
            icon="el-icon-bottom"
            @click="cancelSale(row.id)"
          ></el-button>
          <el-button type="primary" size="mini" icon="el-icon-edit" title="修改"></el-button>
          <el-button type="info" size="mini" icon="el-icon-info" title="查看详情"></el-button>
          <el-button
          style="margin-left : 10px"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            title="删除"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 
        @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="SkuList"
      :current-page="page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="limit"
      prev-text="上一页"
      next-text="下一页"
      align="center"
      layout="prev, pager, next,jumper,->,total, sizes"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
export default {
  name: "Sku",

  data() {
    return {
      page: 1, //分页器的当前页码
      limit: 5, //当前一页展示几条数据
      total: 0, //一共的数据
      skuList: [], //sku的数据
      loading: false, //加载效果

    };
  },
  mounted() {
    this.SkuList();
  },
  methods: {
    //   获取列表
    async SkuList(value=1) {
        this.page= value;
        // 加载效果
        this.loading=true;
      let { page, limit } = this;
      let result = await this.$ajax.sku.getList(page,limit);
      this.total = result.data.total;
      this.skuList = result.data.records;
        this.loading=false;
    },
    // 修改一页多少条数据
    handleSizeChange(value) {
        this.limit= value;
        this.SkuList();
    },
    onSale(skuId){
        this.$ajax.sku.onSale(skuId).then((result) => {
        this.$message({
          type: "success",
          message: "上架成功!",
        });
        this.SkuList(this.page);
      });
    },
    // 
    cancelSale(skuId){
         this.$ajax.sku.cancelSale(skuId).then((result) => {
        this.$message({
          type: "success",
          message: "下架成功!",
        });
        this.SkuList(this.page);
      });
    }
  },
};
</script>

<style>
</style>